<template>
  <view >
    <view class="home_tap">
      <view class="home_tap_title">
        <view class="title_inner">
          <uni-segmented-control
            :current="current"
            :values="items.map(v=>v.title)"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#4cd964"
          ></uni-segmented-control>
        </view>
        <view class="iconfont icon-soushuo"></view>
      </view>
      <view class="home_tap_content content">
       <!-- 图片渲染开始 -->
       <scroll-view class="img_list" @scrolltolower="handleToLower" scroll-y>
           <view class="bottom">
              
          <view class="img_item"
           v-for="(item,index) in list"
           :key="item.id"
           >
            <ima-data :list="list" :index="index">
                      <image mode="widthFix" :src="item.thumb"></image>
               </ima-data>
            
           </view>
           </view>
      
       </scroll-view>
         <!-- 图片渲染结束-->
      </view>
    </view>
  </view>
</template>

<script>
import imaData from "@/components/imgData/index.vue"
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
  components: {
    uniSegmentedControl,
    imaData
  },
  data() {
    return {
      items: [
        { title: "最新",order:"new" },
        { title: "热门",order:"hot" }
      ],
      current:0,
      params:{
          limit:30,
          skip:0,
          order:"new"
      },
      id:0,
      list:[],
      fag:true
    };
  },
  onLoad(options){
      this.id=options.id
      this.getList()
  },
  methods: {
    onClickItem(e) {
        // 点击最新和最热重新发送数据
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
      this.params.order=this.items[e.currentIndex].order
      this.params.skip=0
      this.list=[]
      this.getList();
    },
    getList(){
      this.request({
          url:`http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
          data:this.params
      })
      .then(result=>{
          if(result.res.vertical.length===0){
              this.fag=false
            uni.showToast({
                title: '到底了',
                icon: 'none',
            });
            return;
          }
        this.list=[...this.list,...result.res.vertical]
      })
    },
    handleToLower(){
        if(this.fag){
          this.params.skip+=this.params.limit
          this.getList()
        }else{
            uni.showToast({
                title:"没有数据了",
                icon:"none"
            })
        }
     
    }
  },
};
</script>

<style lang="scss" scoped>
.home_tap{
  .home_tap_title{
     position: relative;
     border-bottom:1px solid #cccccc;
    .title_inner{
      width:60%;
      margin:0 auto;
    }
    .iconfont{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    right:5%;
    }
  }
  .home_tap_content {}
}
.img_list{
    width:100%;
    height:calc( 100vh - 46rpx );
   
    .bottom{
         display:flex;
    flex-wrap: wrap;
 .img_item{

        width:50%;
        border:2px solid #fff;
    }
    }
   
}
</style>